<template>
  <div id="box2" style="width: 35%; height: 300px;"></div>
</template>

<script>
import * as echarts from "echarts";
import {getLastEducation} from '@/api/data';
export default {
  data() {
      return{
          list1:{}
      }
  },
  name: "Eduction",
  methods: {
    myEcharts() {
      var chartDom = document.getElementById("box2");
      var myChart = echarts.init(chartDom, "dark");
      var option;

      option = {
        title: {
          text: "昨日顾客学历",
          left: "center",
          top:'5%',
          textStyle: {//主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
                fontSize: 14,
                fontStyle: 'normal',
                fontWeight: 'normal',
            },
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: 'left',
          top:'5%'
        },
        series: [
          {
            name: "类别人数",
            type: "pie",
            radius: "50%",
            data: [
              { value: this.list1.pupil, name: "小学" },
              { value: this.list1.junior, name: "初中" },
              { value: this.list1.high, name: "高中" },
              { value: this.list1.bachelor, name: "大学" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };

      option && myChart.setOption(option,true);
    
    },
  },
//   mounted() {
//     this.myEcharts();
//   },
  created(){
    getLastEducation().then(res=>{
    this.list1 = res.data.list[0];
    this.myEcharts();
})
  }
};
</script>

<style>
</style>